<template>
  <!-- 首页 -->
  <div class="container-fluid">
    <div class="row carousel slide" id="carouselExampleIndicators" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active hehe"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1" class="hehe"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img
            src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/banner1.png"
            class="d-block w-100"
            alt="..."
          >
        </div>
        <div class="carousel-item">
          <img
            src="https://hteweb.oss-cn-qingdao.aliyuncs.com/web2/3.jpg"
            class="d-block w-100"
            alt="..."
          >
        </div>
      </div>
    </div>
    <top1action></top1action>
    <top2action></top2action>
    <div class="banner row">
      <div class="intermediate-a">
        <div class="age">
          <img
            class="stage wo"
            src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/5-7.png"
            alt
          >
        </div>
        <div class="age1">
          <img
            class="stage wo"
            src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/7-9.png"
            alt
          >
        </div>
        <div class="age2">
          <img
            class="stage wo"
            src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/9-10.png"
            alt
          >
        </div>
        <div class="age8">
          <img
            class="stage wo"
            src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/9-10.png"
            alt
          >
        </div>
        <div class="age3">
          <img
            class="stage wo"
            src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/10-11.png"
            alt
          >
        </div>
        <div class="age4">
          <img
            class="stage wo"
            src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/11-12.png"
            alt
          >
        </div>
        <div class="age5">
          <img
            class="stage wo"
            src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/12-18.png"
            alt
          >
        </div>
        <div class="age6">
          <img
            class="stage wo"
            src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/12-18.png"
            alt
          >
        </div>
        <div class="age7">
          <img
            class="stage wo"
            src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/12-18.png"
            alt
          >
        </div>
      </div>
    </div>
    <div class="button row">
      <div class="all conner" id="box">
        <div class="button-lt">
          <a class="xiaoyu" :class="dis(0)" @click="prev" href="javascript:void(0)">&lt;</a>
        </div>
        <div class="screen" id="container">
          <ul class="pailie">
            <li class="hengpai">
              <div class="zichuan">
                <div class="img1">
                  <img
                    class="add"
                    src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/7.png"
                    alt
                  >
                </div>
                <p class="Introduction">8岁 学习5个月</p>
                <p class="Introduction">李*川</p>
              </div>
            </li>
            <li class="hengpai">
              <div class="img1">
                <img
                  class="add"
                  src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/8.png"
                  alt
                >
              </div>
              <p class="Introduction">7岁 学习4个月</p>
              <p class="Introduction">*盟</p>
            </li>
            <li class="hengpai">
              <div class="img1">
                <img
                  class="add"
                  src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/9.png"
                  alt
                >
              </div>
              <p class="Introduction">9岁 学习9个月</p>
              <p class="Introduction">*强</p>
            </li>
            <li class="hengpai">
              <div class="img1">
                <img
                  class="add"
                  src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/10.png"
                  alt
                >
              </div>
              <p class="Introduction">10岁 学习1年</p>
              <p class="Introduction">刘*凡</p>
            </li>
            <li class="hengpai">
              <div class="img1">
                <img
                  class="add"
                  src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/12.png"
                  alt
                >
              </div>
              <p class="Introduction">8岁 学习7个月</p>
              <p class="Introduction">*曦</p>
            </li>
            <li class="hengpai heh">
              <div class="img1">
                <img
                  class="add"
                  src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/11.png"
                  alt
                >
              </div>
              <p class="Introduction">12岁 学习2年</p>
              <p class="Introduction">高*伟</p>
            </li>
            <li class="hengpai heh">
              <div class="img1">
                <img
                  class="add"
                  src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/22.png"
                  alt
                >
              </div>
              <p class="Introduction">8岁 学习1个月</p>
              <p class="Introduction">温*茗</p>
            </li>
            <li class="hengpai heh">
              <div class="img1">
                <img
                  class="add"
                  src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/23.png"
                  alt
                >
              </div>
              <p class="Introduction">9岁 学习1月</p>
              <p class="Introduction">*峰</p>
            </li>
          </ul>
        </div>
        <div class="button-gt">
          <a class="dayu" :class="dis(1)" @click="next" href="javascript:void(0)">&gt;</a>
        </div>
      </div>
    </div>
    <top3action></top3action>
  </div>
</template>

<script>
let timer = false;
let time = null;
import top1action from "./top1action.vue";
import top2action from "./top2action.vue";
import top3action from "./top3action.vue";
import $ from "jquery";
export default {
  name: "login",
  components: {
    top1action,
    top2action,
    top3action
  },
  data() {
    return {
      left: 0
    };
  },
  watch: {
    left(v) {
      if (v < -1000) {
        this.left = 0;
      }
      $(".pailie").css({
        left: v + "px"
      });
    }
  },
  mounted() {
    var i = 0;
    time = setInterval(mover, 3000);
    function mover() {
      $(".wo").removeClass("stage1");
      $($(".wo")[i]).addClass("stage1");
      i++;
      if (i >= 9) {
        i = 0;
      }
    }
    timer = setInterval(() => {
      this.left -= 250;
    }, 3000);
    function stop() {
      clearInterval(timer);
    }
    const box = document.getElementById("box");
    box.onmouseover = stop;
    // 开启定时器

    const normalImg = () => {
      clearInterval(timer);
      timer = setInterval(() => {
        this.left -= 250;
      }, 3000);
    };
    box.onmouseout = normalImg;
  },
  methods: {
    prev() {
      if (this.left != -1500) {
        this.left -= 250;
      }
    },
    next() {
      if (this.left != -1500) {
        this.left -= 250;
      }
    },
    dis() {
      return "btn btn-primary";
    }
  },
  beforeRouteLeave(to, from, next) {
    next();
    clearInterval(timer);
    clearInterval(time);
  }
};
</script>

<style scoped>
.conner {
  width: 1200px;
  margin: 0 auto;
}

.w-100 {
  min-width: 1200px;
}

.banner {
  min-width: 1200px;
  height: 1093px;
  background-image: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/tuceng0.png");
  background-repeat: no-repeat;
  background-position: center;
}
/* 年龄阶段每个图片样式（8个） */
.age {
  width: 83px;
  height: 53px;
  margin-top: 236px;
  margin-left: 21px;
  text-align: center;
}
.age1 {
  width: 83px;
  height: 53px;
  margin-top: -95px;
  margin-left: 175px;
  text-align: center;
}
.age2 {
  width: 83px;
  height: 53px;
  margin-top: -99px;
  margin-left: 329px;
  text-align: center;
}
.age3 {
  width: 83px;
  height: 53px;
  margin-top: -98px;
  margin-left: 633px;
  text-align: center;
}
.age8 {
  width: 83px;
  height: 53px;
  margin-top: -98px;
  margin-left: 482px;
  text-align: center;
}
.age4 {
  width: 83px;
  height: 53px;
  margin-top: -97px;
  margin-left: 786px;
  text-align: center;
}
.age5 {
  width: 83px;
  height: 53px;
  margin-top: -99px;
  margin-left: 939px;
  text-align: center;
}
.age6 {
  width: 83px;
  height: 53px;
  margin-top: -53px;
  margin-left: 1088px;
  text-align: center;
}
.age7 {
  width: 83px;
  height: 53px;
  margin-top: -54px;
  margin-left: 1239px;
  text-align: center;
}
/* 向左转动20度 */
.zhuan_left {
  transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
}
/* 向右转动20度 */
.zhuan_right {
  -webkit-transform: rotate(10deg);
  transform: rotate(10deg);
}

.stage1 {
  /* animation-delay: -0.5s; */
  transform-origin: center bottom;
  animation-name: identifier;
  animation-duration: 4s;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
}

@keyframes identifier {
  0% {
    transform: translate(0px, 10px);
  }
  3% {
    transform: translate(0px, 8px);
  }
  6% {
    transform: translate(0px, 6px);
  }
  9% {
    transform: translate(0px, 4px);
  }
  12% {
    transform: translate(0px, 2px);
  }
  14.3% {
    transform: translate(0px, 0px);
  }
  17% {
    transform: translate(0px, 2px);
  }
  9% {
    transform: translate(0px, 4px);
  }
  28.6% {
    transform: translate(0px, 10px);
  }
  42.9% {
    transform: translate(0px, 0px);
  }
  57.2% {
    transform: rotate(-20deg);
  }
  78.4% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.button {
  height: 757px;
  min-width: 1200px;
  background-image: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/font-family.png");
  background-position-x: center;
  background-position-y: 130px;
  background-repeat: no-repeat;
}

.pailie {
  display: flex;
  position: relative;
  transition-delay: 0;
  transition-timing-function: linear;
  transition-property: all;
  transition-duration: 1s;
}

.pailie li {
  -webkit-box-flex: 1;
  flex-grow: 1;
  margin-right: 48px;
}

.Introduction {
  text-align: center;
  margin-top: 13px;
}

.img1 {
  width: 202px;
  height: 242px;
  background: pink;
}

.add {
  width: 202px;
  height: 242px;
}

.hengpai {
  float: left;
  list-style-type: none;
  height: 315px;
}

.all {
  height: 325px;
  margin-top: 312px;
}

#haha a {
  width: 51px;
  height: 50px;
  color: #ffffff;
  text-decoration: none;
}

.xiaoyu {
  position: absolute;
  width: 42px;
  height: 42px;
  margin: 0 auto;
  margin-left: 8px;
  font-size: 18px;
  border-color: #ffffff;
  box-shadow: none;
}

.dayu {
  position: absolute;
  width: 42px;
  height: 42px;
  margin: 0 auto;
  margin-left: 8px;
  font-size: 19px;
  border-color: #ffffff;
  box-shadow: none;
}

#haha .hehe {
  width: 76px;
  height: 5px;
  margin-right: 22px;
}

.Detai2-6 {
  width: 240px;
  height: 43px;
  background-color: #3d79e4;
  border-radius: 3px;
}

.height900 {
  height: 900px;
  min-width: 1200px;
}

.clearfix {
  clear: both;
}

.pull-left {
  float: left !important;
}

.pull-right {
  float: right !important;
}
.intermediate-a {
  width: 1355px;
  height: 651px;
  margin: 0 auto;
  margin-top: 299px;
}
.carousel-inner {
  min-width: 1200px;
}
.btn-light {
  background: skyblue;
}

#box {
  display: flex;
  align-items: center;
  justify-content: center;
}

#box .button-lt {
  flex: 1;
  height: 100px;
}
#box .button-gt {
  flex: 1;
  height: 100px;
}
#box .screen {
  flex: 12;
  height: 335px;
  overflow-x: hidden;
  margin: 0 45px;
}
.btn-primary {
  background: skyblue;
}
.xiaoyu:hover {
  background: #007bff;
}
.dayu:hover {
  background: #007bff;
}
</style>
